<template>
  <div>
    <a-drawer
      title="Create a new account"
      :width="720"
      :visible="model"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-form :form="form" layout="vertical" hide-required-mark>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="路由名称">
              <a-input
                v-decorator="[
                  'title',
                  {
                    rules: [
                      { required: true, message: 'Please enter user title' },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="路径">
              <a-input
                v-decorator="[
                  'path',
                  {
                    rules: [{ required: true, message: 'please enter path' }],
                  },
                ]"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="重定向">
              <a-input
                v-decorator="[
                  'redirect',
                  {
                    rules: [
                      {
                        required: false,
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="上一级">
              <a-select
                v-decorator="[
                  'pid',
                  {
                    rules: [
                      { required: false, message: 'Please choose the type' },
                    ],
                  },
                ]"
              >
                <a-select-option
                  v-for="item in prouter"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.title }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="组件地址">
              <a-input
                v-decorator="[
                  'component',
                  {
                    rules: [{ required: true, message: 'please enter path' }],
                  },
                ]"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="icon">
              <a-input
                v-decorator="[
                  'icon',
                  {
                    rules: [{ required: false, message: 'please enter path' }],
                  },
                ]"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="打开方式">
              <a-select
                v-decorator="[
                  'target',
                  {
                    rules: [
                      { required: true, message: 'Please select an target' },
                    ],
                  },
                ]"
              >
                <a-select-option value="_block"> 新页面 </a-select-option>
                <a-select-option value="_self"> 当前页面 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否缓存">
              <a-select
                v-decorator="[
                  'keepAlive',
                  {
                    rules: [
                      { required: true, message: 'Please choose the type' },
                    ],
                  },
                ]"
              >
                <a-select-option :value="1"> 是 </a-select-option>
                <a-select-option :value="0"> 否 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
          <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="是否在路由中隐藏">
              <a-select
                v-decorator="[
                  'hiddens',
                  {
                    rules: [
                      { required: true, message: 'Please select an target' },
                    ],
                  },
                ]"
              >
                <a-select-option :value="1"> 是 </a-select-option>
                <a-select-option :value="0"> 否 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" @click="onSubmit"> 添加 </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import { addRouter ,updateRouter} from "@/api";
export default {
  props: {
    model: {},
  },
  data() {
    return {
      prouter: [],
      form: null,
    };
  },
  mounted() {
    this.form = this.$form.createForm(this, { name: "router" });
    this.form.getFieldDecorator("target", { initialValue: "_self" });
    this.form.getFieldDecorator("keepAlive", { initialValue: 0 });
    this.form.getFieldDecorator("hiddens", { initialValue: 0 });
  },

  methods: {
    setFieldsValue(data) {
      console.log(data, 1);
      var obj = {
        target: data.target || "",
        component: data.component || "",
        pid: data.pid || 0,
        icon: data.icon || "",
        path: data.path || "",
        keepAlive: data.keepAlive ? 1 : 0,
        title: data.title || "",
        redirect: data.redirect || "",
        hiddens: data.hidden,
      };
      this.id = data.id || "";
      this.form.setFieldsValue(obj);
    },
    onSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          if (!this.id) {
            addRouter(values).then((res) => {
              this.$emit("on-success");
            });
          }else{
            values.id = this.id
              updateRouter(values).then((res) => {
                
              this.$emit("on-success");
            });
          }
        }
      });
    },
    onClose() {
      this.$emit("on-close");
    },
  },
};
</script>
